<template>
  <div>
    <SuperTable :data-request="fetchData" :columns="baseColumns" header-title="样本信息" pager align="center" border search
      ref="supertable" :export-config="{}"> </SuperTable>
  </div>
  <a-drawer v-model:visible="visible" class="custom-class" style="" width="80%" placement="right">
    <div id="print-block">
      <HeaderTitle title="入库单信息"></HeaderTitle>
      <div>
        <h1 style="display: flex; width: 100%; justify-content: center; font-size: 24px; font-width: 700">入库单</h1>
        <a-row style="font-size: 15px; font-width: 700">
          <a-col style="padding: 5px" :span="4"> 入库单号:{{ formState.batchNo }} </a-col>
          <a-col style="padding: 5px" :span="5"> 创建时间:{{ formState.createTime }} </a-col>
          <a-col style="padding: 5px" :span="5"> 入库日期:{{ formState.finishTime }}</a-col>
          <a-col style="padding: 5px" :span="5"> Selectedl存档完成 </a-col>
          <a-col style="padding: 5px" :span="4"> 入库数量:{{ formState.data.length }} </a-col>
        </a-row>
      </div>
      <HeaderTitle title="样本信息"></HeaderTitle>
      <vxe-table :export-config="{}" ref="tableRef" style="width: 100%; overflow-y: visible" border max-height="450"
        :data="formState.data" align="center">
        <vxe-column field="specimen_type" title="样本类型"></vxe-column>
        <vxe-column field="serial" title="数字编号"></vxe-column>
        <vxe-column field="storageDesp" title="储存位置"></vxe-column>
        <vxe-column field="originalSerial" title="样本编号"></vxe-column>
        <vxe-column field="name" title="样本名称"></vxe-column>
        <vxe-column field="projectName" title="项目组"></vxe-column>
      </vxe-table>
    </div>
    <div style="display: flex; justify-content: center; background-color: #fff; margin: 20px 0">
      <Popconfirm title="是否确认导出？" @confirm="exportExcelFn">
        <Button type="primary">Excel导出</Button>
      </Popconfirm>
      <a-button style="margin-left: 20px" type="primary" @click="print">打印</a-button>
    </div>
    <div style="display: flex">
      <div v-if="isshow" @click="openbillManage"
        style="width: 100px; height: 100px; border: 1px solid #ccc; display: flex; justify-content: center; align-items: center">
        <svg t="1683701718490" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="2508" width="30" height="30">
          <path
            d="M469.333333 469.333333V170.666667h85.333334v298.666666h298.666666v85.333334h-298.666666v298.666666h-85.333334v-298.666666H170.666667v-85.333334h298.666666z"
            fill="#444444" p-id="2509"></path>
        </svg>
      </div>
      <div>
        <p v-for="item in formState.attachments" :key="item.id" @click="openbillManage">
          <span>{{ item.name }}</span>
          <svg style="cursor: pointer" t="1681117743816" class="icon" viewBox="0 0 1024 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="2701" width="23" height="23">
            <path
              d="M202.666667 256h-42.666667a32 32 0 0 1 0-64h704a32 32 0 0 1 0 64H266.666667v565.333333a53.333333 53.333333 0 0 0 53.333333 53.333334h384a53.333333 53.333333 0 0 0 53.333333-53.333334V352a32 32 0 0 1 64 0v469.333333c0 64.8-52.533333 117.333333-117.333333 117.333334H320c-64.8 0-117.333333-52.533333-117.333333-117.333334V256z m224-106.666667a32 32 0 0 1 0-64h170.666666a32 32 0 0 1 0 64H426.666667z m-32 288a32 32 0 0 1 64 0v256a32 32 0 0 1-64 0V437.333333z m170.666666 0a32 32 0 0 1 64 0v256a32 32 0 0 1-64 0V437.333333z"
              fill="#1296db" p-id="2702"></path>
          </svg>
        </p>
      </div>
    </div>
    <a-row type="flex" justify="start" align="middle" class="info-margin info-title">
      <a-col style="width: 60%; justify-content: flex-start">
        <div class="col-33-r">
          <div style="margin-top: 10px; width: 100%">
            <h4>底单历史修改记录:</h4>
            <table style="width: 100%">
              <tr>
                <th style="padding: 0px 10px">修改日期</th>
                <th>修改人</th>
                <th>修改说明</th>
              </tr>
              <tr v-for="(item, index) in formState.histories" :key="index">
                <td style="padding: 0px 10px">{{ item.modifyTime }}</td>
                <td>{{ item.modifierId }}</td>
                <td>{{ item.modifyReason }}</td>
              </tr>
            </table>
          </div>
        </div>
      </a-col>
    </a-row>
  </a-drawer>
  <Modal :destroyOnClose="true" :maskClosable="false" :footer="null" title="底单存档" width="60%"
    v-model:visible="showHighCamera">
    <HighCameracopy @uploadSuccess="uploadSuccess" :attachments="formState.attachments"
      highCameraId="inputManageHighCamera" canvasCameraId="inputManageCanvasCamera" :billId="formState.id" :billType="1">
    </HighCameracopy>
  </Modal>
  <!-- 打印表格 -->
</template>
<script setup lang="tsx">
import SuperTable from '@/framework/components/core/super-table/super-table.vue';
import { VxeGridPropTypes } from 'vxe-table';
import { ref } from 'vue';
import HeaderTitle from '@/components/headerTitle.vue';
import columns, { TableColumnList } from './columns';
import { inputSearch, inputGetById, DELETEinputUp } from '../../api/input_manage';
import { useRouter } from 'vue-router';
import HighCameracopy from '@/components/photograph/HighCameracopy.vue';
import { Modal } from 'ant-design-vue';
import { Button, Popconfirm } from 'ant-design-vue';
import Print from 'print-js';
import { addSpecimenType } from '@/libs/utils';
const router = useRouter();
const tableRef = ref();
const supertable = ref();
const exportExcelFn = () => {
  tableRef.value?.openExport();
};
const visible = ref(false);
const showHighCamera = ref(false);
const formState = ref({
  data: [],
  id: 0,
  attachments: [],
  histories: [],
  batchNo: '',
  createTime: '',
  finishTime: '',
});
const isshow = ref(false);
// 修改底单存档后的回调
const uploadSuccess = async () => {
  showHighCamera.value = false;
  const { result } = await inputGetById(formState.value.id);
  let arr = [];
  formState.value.attachments = result.attachments;
  formState.value.histories = result.histories;
  result.stocks.forEach((item) => {
    item.subSpecimens.forEach((el) => {
      arr.push({ ...el, storageDesp: item.storageDesp });
    });
  });
  addSpecimenType(arr);
  formState.value.data = arr;
  visible.value = true;
};
let baseColumns: TableColumnList = [
  ...columns,
  {
    title: '操作',
    field: '$action',
    hideInSearch: true,
    align: 'center',
    fixed: 'right',
    width: 300,
    actions: ({ row }) => [
      {
        label: '查看',
        onClick: async () => {
          console.log(row.status, 44);
          isshow.value = row.status == 9 ? true : false;
          const { result } = await inputGetById(row.id);
          formState.value.id = row.id;
          let arr = [];
          formState.value.attachments = result.attachments;
          formState.value.histories = result.histories;
          formState.value.batchNo = result.batchNo;
          formState.value.createTime = result.createTime;
          formState.value.finishTime = result.finishTime;
          result.stocks.forEach((item) => {
            addSpecimenType(item.subSpecimens);
            item.subSpecimens.forEach((el) => {
              arr.push({ ...el, storageDesp: item.storageDesp });
            });
          });
          formState.value.data = arr;
          visible.value = true;
        },
      },
      {
        label: '编辑',
        disabled: row.status > 3,
        onClick: async () => {
          router.push({ name: 'input_manage_detail', query: { id: row.id } });
        },
      },
      {
        label: '删除',
        disabled: row.status > 1,
        onClick: async () => {
          Modal.confirm({
            title: '您确定要删除入库单吗？',
            onOk: async () => {
              await DELETEinputUp(row.id);
              supertable.value?.refreshTable()
            },
          })
        },
      },
    ],
  },
];
const openbillManage = () => {
  showHighCamera.value = true;
};
const fetchData = async (ori: VxeGridPropTypes.ProxyAjaxQueryParams) => {
  let data = supertable.value?.getFormModel();
  let params: any = {
    pageSize: ori.page.pageSize,
    pageNum: ori.page.currentPage,
    orderBy: [
      {
        field: 'id',
        order: 'desc',
      },
    ],
  };
  if (data.createTime) {
    params.createTimeBtw = data.createTime.join() + ' 23:59:59';
  }
  data.batchNo ? (params.batchNo = data.batchNo) : '';
  const { result } = await inputSearch(params);
  return result;
};
const print = () => {
  Print({
    printable: 'print-block',
    type: 'html',
    documentTitle: '入库单',
    header: '入库单',
    headerStyle: 'font-weight:400;text-align:center;margin:50px 0',
    maxWidth: 1500,
    targetStyles: ['*'], // 允许打印所有样式属性
  });
};
</script>
<style lang="less" scoped>
p {
  margin-bottom: 3px;
  color: #1296db;
  font-size: 16px;
  display: flex;
  align-content: center;
  // line-height: ;
  margin-left: 5px;

  span {
    cursor: pointer;
    margin-right: 10px;
  }
}

.col-33 {
  width: 33.33%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.col-33-r {
  width: 68%;
  text-align: left;
  display: flex;
  align-items: center;
}

.tx_img {
  width: 600px;
}

.info-margin {
  margin-bottom: 18px;
}

.info-title {
  font-size: 14px;
}

.confirm-block {
  text-align: right;
}

.info-img {
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed;
}

.table-style {
  padding-left: 75px;
}

.show/deep/.ivu-drawer-right {
  margin-top: 4%;
  height: 90%;
}

th {
  padding: 10px 20px;
}

td {
  padding: 0 20px;
}

.left {
  margin-left: 5.5%;
}
</style>
